<template>
    <view class="box">
        <view class="lable">原手机号验证</view>
        <view class="lable-tips">请输入136****215收到的短信验证码，进行安全验证</view>
        <view class="code-input-list">
            <view class="code-input">
                <view class="code-input-lable">验证码：</view>
                <input class="code-input-1" placeholder-class="code-input-pc" placeholder="请输入验证码" />
            </view>
            <view class="code-but">获取验证码</view>
        </view>
        <view class="footer-but">
            <view class="but-1 but-1-active">确认</view>
        </view>
    </view>
</template>

<script>
</script>

<style lang="scss" scoped>
    page{
        background-color: #fff;
    }
    .box{
        padding: 34rpx 30rpx;
        .lable{
            font-size: 30rpx;
            font-family: PingFang SC-Semibold, PingFang SC;
            font-weight: 600;
            color: #323232;
        }
        .lable-tips{
            font-size: 26rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
        }
        .code-input-list{
            display: flex;
            margin-top: 40rpx;
            .code-input{
                display: flex;
                align-items: center;
                // width: 420rpx;
                height: 80rpx;
                background: #F4F4F4;
                border-radius: 5rpx;
                opacity: 1;
                .code-input-lable{
                    width: 120rpx;
                    font-size: 24rpx;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    margin-left: 20rpx;
                }
                .code-input-1{
                     height: 80rpx;
                }
                .code-input-pc{
                    font-size: 24rpx;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #999999;
                }
            }
            .code-but{
                margin-left: 20rpx;
                width: 250rpx;
                height: 80rpx;
                background: #E96A1D;
                border-radius: 5rpx 5rpx 5rpx 5rpx;
                opacity: 1;
                
                font-size: 24rpx;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        .footer-but{
            margin-top: 200rpx;
            padding: 0 25rpx;
            .but-1{
                height: 88rpx;
                background: linear-gradient(138deg, #EA8C1E 0%, #E84A1D 100%);
                border-radius: 50rpx;
                opacity: 1;
                
                display: flex;
                align-items: center;
                justify-content: center;
                
                font-size: 34rpx;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
            }
            .but-1-active{
                background: #F4B48D;
            }
        }
    }
</style>